<template>
	<app-layout>
		<view class="">
			<xyz-masonry @itemClick="itemClick" :value="list" @click="del" :isdel="true" />
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import xyzMasonry from '../components/xyz-masonry.vue';
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				pagecount: 1,
				list: []
			}
		},
		components: {
			xyzMasonry
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		onLoad() {
			this.getVideoList()
		},
		onReachBottom() {
			if (this.pagecount > this.page) {
				this.page++
				this.getVideoList()
			}
		},
		methods: {
			getVideoList() {
				this.$showLoading();
				this.$request({
					url: this.$api.sixty.list,
					data: {
						page: this.page,
						page_size: this.limit,
						user_id: this.userInfo.options.user_id
					}
				}).then((res) => {
					// console.log(res);
					this.$hideLoading();
					uni.stopPullDownRefresh()
					this.pagecount = res.data.pagination.page_count

					this.list = this.list.concat(res.data.list);
					// this.$storage.setStorageSync('agetvideo', this.list)
				}).catch(err => {
					this.$hideLoading();
					uni.stopPullDownRefresh()
					// console.log(err);
				})
			},
			del(id) {
				this.$request({
					url: this.$api.sixty.delete,
					method: 'post',
					data: {
						id: id,
						user_id: this.userInfo.options.user_id
					},
				}).then(res => {
					if (res.code == 0) {
						this.list = []
						this.pagecount = 1
						this.page = 1
						this.getVideoList()
					}
				}).catch(err => {
					console.log(err);
				})
			},
			itemClick(id) {
				// console.log(id);
				uni.navigateTo({
					url: `/pages/sixty/fullscreen/index?id=${id}&userid=${this.userInfo.options.user_id}`,
				})
			},
		}
	}
</script>

<style scoped lang="scss">

</style>
